<template>
    <div>
        <Row>
            <Col span="8">
                <Select v-model="site" placeholder="请选择比价网络平台">
                    <Option :value="index" v-for="(item,index) in siteList" :key="index">{{item.name}}{{item.url}}
                    </Option>
                </Select>
            </Col>
        </Row>
        <Row v-show="!goodsShow">
            <Col span="24">
                <div class="search-goods" v-show="searchShow">
                    <Form ref="formInline" :model="formItem" inline>
                        <row type="flex" justify="center" class="code-row-bg">
                            <Col span="7">
                                <Select v-model="formItem.select1" placeholder="选择产品种类" style="width: 330px">
                                    <Option :value="item.value" v-for="(item,index) in CatList" :key="index">
                                        {{item.label}}
                                    </Option>
                                </Select>
                            </Col>
                            <Col span="3">
                                <FormItem class="form-item">
                                    <Button type="primary" @click="searchGoodsAction">搜索</Button>
                                </FormItem>
                            </Col>
                        </row>
                    </Form>
                </div>
                <img class="show-img" :src="showImgUrl">
            </Col>
        </Row>
        <div class="goods-list" v-show="goodsShow">
            <Row>
                <Col span="6" v-for="(item,index) in goodsList" :key="index">
                    <div>
                        <img class="img" :src="item.img">
                    </div>
                    <div><input type="radio" name="goods" v-model="statisticsImg" :value="item.statistics"></input>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="save-content">
            请输入你了解到的价格以供参考：
            <Button type="primary" @click="saveContent" size="small">提交</Button>
            <div class="save-content-input">
                <Input v-model="evaluate" :autosize="{minRows: 2,maxRows: 5}" show-word-limit type="textarea"
                       placeholder="请输入价格" class="inputti"/>
            </div>
        </div>
    </div>
</template>

<script>
import { getCategoryList, saveStudentConten } from '@/api/school'
import siteData from '@/mock/data/site'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      siteList: siteData,
      site: '',
      showImgUrl: '',
      formItem: {
        select1: ''
      },
      CatList: [
        { value: '', label: '小蜜蜂软糖' }
      ],
      goodsList: [],
      searchShow: false,
      goodsShow: false,
      evaluate: ''
    }
  },
  methods: {
    ...mapActions([
      'setHelpId'
    ]),
    getCatList () {
      getCategoryList().then(ret => {
        if (ret.data.errcode === 1001) {
          let list = ret.data.data
          list.forEach(item => {
            if (item.type === 1) {
              this.CatList1.push(item)
            }
          })
        }
      })
    },
    searchGoodsAction () {
      this.showImgUrl = this.formItem.select1
      // let data = { type1_id: this.formItem.select1 }
      // searchGoods(data).then(ret => {
      //   if (ret.data.errcode === 1001) {
      //     this.goodsShow = true
      //     this.goodsList = ret.data.data
      //   } else {
      //     this.$Message.error('没有查询到数据')
      //   }
      // })
    },
    saveContent () {
      let data = { type: '2', content: this.evaluate }
      saveStudentConten(data).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$Message.success(
            {
              content: '保存成功!',
              onClose: () => {
                this.$router.push({
                  name: 'schoolCostReadme'
                })
              }
            })
        } else {
          this.$Message.error({
            content: '保存失败,\n' + ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.setHelpId(6)
  },
  watch: {
    site (index) {
      this.goodsShow = false
      this.searchShow = true
      this.showImgUrl = siteData[index].img
      this.CatList = [{ label: '小蜜蜂软糖', value: siteData[index].goodsList }]
    }
  }
}
</script>

<style scoped lang="less">
    .show-img {
        width: 100%;
    }

    .search-goods {
        line-height: 60px;
        width: 100%;
        background-color: white;
        height: 70px;
        position: relative;
        top: 70px;
    }

    .goods-list {
        margin-top: 100px;
        width: 80%;
    }

    .form-item {
        margin-top: 13px;
    }

    .save-content {
        margin-top: 60px;
        width: 40%;

        &-input {
            margin-top: 10px;
        }
    }
</style>
